<template>
  <div
    style="height: 523px; overflow: hidden; background: white; border:1px solid white ; border-radius: 8px; margin-top: 10px;">
    <div style="margin-top: 14px;">
      <h5 style="text-align: left; margin-left: 14px;">
        <sapn>当前可变更的设计单总数：{{this.tableData.length}} 例</sapn>
        <span style="color: blue;">其中正在变更:0例&nbsp;&nbsp;</span>

      </h5>

    </div>
    <div style="background-color: #E9EEF3; height: 450px; margin: 10px; padding: 4px; border-radius: 7px;">
      <template>
        <el-table :data="tableData" style="width: 100%;height: 400px;">
          <el-table-column prop="pducess_id" label="设计单编号" width="150">
          </el-table-column>
          <el-table-column prop="proSige_id" label="产品编号" width="150">
          </el-table-column>
          <el-table-column prop="pName" label="产品名称" width="150">
          </el-table-column>
          <el-table-column prop="designer" label="设计人" width="150">
          </el-table-column>
          <el-table-column prop="regtime" label="登记时间" width="160">
          </el-table-column>
          <el-table-column prop="gongShiPrice" label="工时总成本" width="150">
          </el-table-column>
          <el-table-column label="变更" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-button type="primary" size="mini" @click="zhisjd(scope.row)" round="">变更</el-button>
            </template>
          </el-table-column>

        </el-table>
      </template>
      <div class="block" style="margin-top: 15px;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
          :page-sizes="[1,2,7]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-drawer title="生产派工单" size="100%" :visible.sync="drawer" direction="ttb" :before-close="handleClose">
      <div style="text-align: center; margin-left: 845px; margin-top: 0px;">
        <span slot="footer" class="dialog-footer">
          <el-button style="width: 45px ; height: 35px;" type="info" @click="scjfds()">返回</el-button>

          <el-button style="width: 75px ; height: 35px;" type="success" @click="replaceProcess()">重新提交</el-button>
        </span>
      </div>
      <div class="body_main">
        <div style="padding: 13px;">
          <el-form :model="proproSheet">
            <el-row>
              <el-col :span="14" style="text-align: left;">
                <span class="span_01">产品名称:{{this.proproSheet.pName}}</span>

              </el-col>
              <el-col :span="10" style="text-align: right;">
                <span class="span_01">产品编号:{{this.proproSheet.proSige_id}}</span>
              </el-col>
            </el-row>
            <el-row style="margin-top: 8px;">
              <el-col :span="8" style="text-align: left;">
                <span class="span_01">设计人:{{proproSheet.designer}}</span>
              </el-col>
              <el-col :span="16" style="text-align: right;">
                <span class="span_01">设计单编号:{{proproSheet.pducess_id}}</span>
              </el-col>
            </el-row>
            <el-table border :data="tableData2" tooltip-effect="dark"
              style="width: 100%;margin-top: 26px;overflow: scroll;height: 178px;" size="mini">
              <el-table-column type="index" width="210">
              </el-table-column>
              <el-table-column prop="processesName" label="工序名称" width="120">
              </el-table-column>
              <el-table-column prop="gongShiNum" label="工时数" width="120">

              </el-table-column>
              <el-table-column prop="unitGSPrice" label="单位工时成本" width="120">

              </el-table-column>
              <el-table-column prop="gSsumPrice" label="工时成本小计(元)" width="120">
              </el-table-column>
              <el-table-column prop="wugCount" label="物料成本小计(元)" width="120">
              </el-table-column>
              <el-table-column label="变更" width="120">
                <template slot-scope="scope">
                  <el-button style="width: 65px ; height: 25px;" v-if="scope.row.isgxwl == '重新设计'"
                    @click="chongxingDesgin(scope.row)" type="danger">
                    {{scope.row.isgxwl}}
                  </el-button>
                  <el-button style="width: 65px ; height: 25px;" @click="desgin(scope.row)" v-else type="info">
                    {{scope.row.isgxwl}}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
            <el-row style="margin-top: 32px">
              <el-col :span="16">
                <h5 style="text-align: left;">工时总成本:{{this.proproSheet.gongShiPrice}}</h5>
              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">物料总成本:{{this.proproSheet.wuliaoSumPrice}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px">
              <el-col :span="16">
                <h5 style="text-align: left;">审核人:{{ this.proproSheet.thereviewer}}
                </h5>

              </el-col>
              <el-col :span="8">
                <h5 style="text-align: right;">审核时间:{{this.proproSheet.audittime}}</h5>
              </el-col>
            </el-row>
            <el-row style="margin-top: 6px;text-align: left;">
              <el-col :span="16">

                <sapn class="span_01">设计要求:{{this.proproSheet.designreq}}</sapn>

                </textarea>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </el-drawer>
    <el-dialog title="工序物料设计单" :visible.sync="dialogVisible2" width="62%" height="300px" :before-close="handleClose">
      <el-row>
        <el-col :span="14" style="text-align: left;">
          <span class="span_01">设计单编号:{{this.proproSheet.pducess_id}}</span>
        </el-col>
        <el-col :span="10" style="text-align: right;">
          <span class="span_01">工序名称:{{this.processesName}}</span>
        </el-col>
      </el-row>
      <el-row style="margin-top: 8px;">
        <el-col :span="8" style="text-align: left;">
          <span class="span_01">登记人:{{proproSheet.redner}}</span>
        </el-col>
        <el-col :span="16" style="text-align: right;">
          <span class="span_01">登记时间:{{proproSheet.audittime}}</span>
        </el-col>
      </el-row>

      <el-table border ref="multipleTable2" :data="tableData3" tooltip-effect="dark"
        style="width: 100%;margin-top: 15px;" size="mini">
        <el-table-column type="index" :index="1" width="100">
        </el-table-column>
        <el-table-column prop="pName" label="物料名称" width="100">
        </el-table-column>
        <el-table-column prop="wid" label="物料编号" width="100">
        </el-table-column>
        <el-table-column prop="designNum" label="设计数量" width="100">
        </el-table-column>
        <el-table-column prop="wuprice" label="单价(元)" width="100">
        </el-table-column>
        <el-table-column prop="wunum" label="本工序数量" width="90">
        </el-table-column>
        <el-table-column prop="wuCount" label="物料费用小计" show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <p style="color: red; text-align: left;">变更前将清理本工序物料设计，您确认进行变更吗？ </p>
      <span slot="footer">
        <el-button style="width: 45px ; height: 25px;" @click="dialogVisible2 = false">关闭</el-button>
        <el-button style="width:  80px ; height: 25px;" type="primary" @click="clearWulaio()">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="工序物料设计" :visible.sync="dialogVisible3" width="62%" height="300px" :before-close="handleClose">
      <el-row>
        <el-col :span="24" style="text-align: left;">
          <h4> 制造产品:{{this.proproSheet.pName}}，供选择的物料清单如下：</h4>
        </el-col>
      </el-row>
      <el-table border ref="multipleTable2" :data="tableData4" tooltip-effect="dark"
        style="width: 100%;margin-top: 5px;" size="mini">
        <el-table-column type="index" :index="1" width="90">
        </el-table-column>
        <el-table-column prop="pName" label="物料名称" width="90">
        </el-table-column>
        <el-table-column prop="wid" label="物料编号" width="90">
        </el-table-column>
        <el-table-column prop="designNum" label="设计数量" width="90">
        </el-table-column>
        <el-table-column prop="keyongNum" label="可用数量" width="90">
        </el-table-column>
        <el-table-column prop="wuprice" label="单价(元)" width="90">
        </el-table-column>

        <el-table-column label="本工序数量" width="90">
          <template slot-scope="scope">
            <el-input v-model="scope.row.wunum" v-on:input="getWunum(scope.row)" controls-position="right" size="mini"
              style="width: 75px" class="inputClass">
            </el-input>
          </template>

        </el-table-column>
        <el-table-column label="物料费用小计" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-model="scope.row.wuCount=scope.row.wunum*scope.row.wuprice" controls-position="right"
              size="mini" style="width: 75px" class="inputClass">
            </el-input>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer">
        <el-button style="width: 45px ; height: 25px;" @click="dialogVisible3=false">关闭</el-button>
        <el-button style="width:  80px ; height: 25px;" type="primary" @click="okupdate()">确定</el-button>
      </span>
    </el-dialog>


  </div>
</template>

<script>
  export default {
    name: 'repset',
    data() {
      return {
        pducess_id: 0,
        processesid: 0,
        dialogVisible2: false,
        dialogVisible3: false,
        tableData3: [],
        tableData4: [],
        dendai: 0,
        wc: 0,
        processesName: '',
        pageNum: 1,
        pageSize: 7,
        total: 0,
        new_proproSheet: {},
        tableData: [],
        tableData2: [],
        dialogVisible3: false,
        drawer: false,
        mpsDto: {
          materialList: []
        },
        proproSheet: {
          redner: '', //登记人员 变更人员
          pducess_id: 0,
          pName: '',
          proSige_id: 0,
          designer: '', //设计人
          gongShiPrice: '', //工时总成本
          thereviewer: '', //审核人
          audittime: '', //审核时间
          designreq: '', //设计要求
          regtime: '',
          wuliaoSumPrice: 0,
          gongxueSigin: '',
        },
        formLabelWidth: '120px'
      }
    },
    methods: {
      okupdate() {
        // mpsDto: {
        //   materialList: []
        // },
        var moeney = 0;
        for (var i = 0; i < this.tableData4.length; i++) {
          if (this.tableData4[i].wuCount == 0 || this.tableData4[i].wuCount == '' || this.tableData4[i].wuCount ==
            undefined) {
            this.tableData4[i].wuCount = 0;
          }
          moeney += this.tableData4[i].wuCount;
        }
        if (moeney == 0) {
          this.dialogVisible3 = false;
          console.log('没有设计!!!');
          return;
        }

        var materialList = this.tableData4;
        for (var i = 0; i < this.tableData4.length; i++) {
          materialList[i].proSige_id = this.proproSheet.proSige_id;
          materialList[i].pducess_id = this.pducess_id;
          materialList[i].processesid = this.processesid;
        }
        this.mpsDto.materialList = materialList;
        this.$http.post('production/product/gxwicxsj', this.$qs.stringify(this.mpsDto, {
          arrayFormat: 'list',
          allowDots: true
        })).then(res => {
          if (res.status == 200) {
            this.$http.post('production/product/cxProducess?pducess_id=' + this.pducess_id).then(res => {
              if (res.length != 0) {
                this.tableData2 = res.data;
                this.GetOnline(this.pageNum, this.pageSize);
                this.dialogVisible3 = false;
              }
            }).catch(err => {
              console.log(err);
            })



          }
        }).catch(err => {
          console.log(err);
        })




      },
      desgin(data) {
        this.pducess_id = data.pducess_id;
        this.processesid = data.processesid
        this.processesName = data.processesName;

        this.$http.post('production/product/selProcessdesginWuliao?proSige_id=' + data.proSige_id).then(res => {
          if (res.data.length != 0) {
            this.tableData4 = res.data;
          }
        }).catch(err => {
          console.log(err);
        })
        this.dialogVisible3 = true;
      },
      clearWulaio() {
        var data = new URLSearchParams();
        data.append("pducess_id", this.pducess_id);
        data.append("processesid", this.processesid);
        this.$http.post("production/product/gswlbgprocess", data).then(res => {
          if (res.status === 200) {
            this.$http.post('production/product/cxProducess?pducess_id=' + this.pducess_id).then(res => {
              if (res.length != 0) {
                this.tableData2 = res.data;
                this.GetOnline(this.pageNum, this.pageSize);
              }
            }).catch(err => {
              console.log(err);
            })
          }
        }).catch(err => {
          console.log(err);
        });

        this.dialogVisible2 = false;
      },
      getWunum(data) {
        if (data.wunum > data.keyongNum) {
          console.log('已经超过可用数量,请重新设置!');
          var index = this.tableData4.findIndex(i => {
            if (data.pName == i.pName) {
              return true;
            }
          })
          this.tableData4[index].wunum = 0;
        }
      },
      replaceProcess() {
        var len = this.tableData2.length;
        if (confirm('确认重新提交? 将重新审核')) {
          // this.$http.post('product/replaceProcess', this.$qs.stringify(this.makepsDto, {
          //   arrayFormat: 'list',
          //   allowDots: true
          // })).then(res => {
          //   if (res.status == 200) {
          //     this.drawer = false;
          //     this.GetOnline(this.pageNum, this.pageSize);
          //   }
          // }).catch(err => {
          //   console.log(err);
          // })
          var falg = true;
          var mes = [];



          for (var i = 0; i < this.tableData2.length; i++) {
            if (this.tableData2[i].isgxwl == "设计") {
              /* alert('请设计未完成的工序!'); */
              mes.push(this.tableData2[i].processesid);
              falg = false;
            }
          }
          if (falg == false) {
            this.$message({
              showClose: true,
              message: '请设计未完成的工序! 工序号:' + mes,
              type: 'error'
            });
            return;
          }
          var flag2 = true;
          this.$http.post('production/product/KeNumCount?proSige_id=' + this.proproSheet.proSige_id).then(res => {
            console.log(res.data);
            flag2 = res.data > 0 ? false : true
            if (!flag2) {
              this.$message({
                showClose: true,
                message: '尚有可用物料,请重新设计!',
                type: 'error'
              });
            } else {
              this.$http.post('production/product/gxwlbgWang?pducess_id='+this.proproSheet.pducess_id).then(res => {
                if (res.status === 200) {
                  this.drawer=false;
                  this.GetOnline(this.pageNum, this.pageSize);
                }
              }).catch(err => {
                console.log(err);
              });
            }
          }).catch(err => {
            console.log(err);
          });
        }
      },
      chongxingDesgin(data) {
        // pducess_id:0,
        // processesid:0,
        this.pducess_id = data.pducess_id;
        this.processesid = data.processesid
        this.processesName = data.processesName;
        this.$http.post('production/product/shProcessWuliaoInfo', this.$qs.stringify(data)).then(res => {
          if (res.data.length != 0) {
            this.tableData3 = res.data;
          }
        }).catch(err => {
          console.log(err);
        })
        this.dialogVisible2 = true;
      },
      scjfds() {
        this.drawer = false;
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.GetOnline(this.pageNum, this.pageSize);
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      GetOnline(pageNum, pageSize) {
        var data = new URLSearchParams();
        data.append("pageNum", pageNum);
        data.append("pageSize", pageSize);
        this.$http.post('production/product/gxwlbgfindByPager', data).then(res => {
          console.log(res.data);
          this.pageNum = res.data.pageNum;
          this.pageSize = res.data.pageSize;
          this.total = res.data.total;
          this.tableData = res.data.rows;
          var index = res.data.rows.findIndex(i => {
            if (this.pducess_id == i.pducess_id) {
              return true;
            }
          });
          this.proproSheet.wuliaoSumPrice = res.data.rows[index].wuliaoSumPrice;
          var dendai = 0;
          var wc = 0;
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].gongxueSigin == "等待审核") {
              dendai++;
            } else {
              wc++;
            }
          }
          this.dendai = dendai;
          this.wc = wc;
        }).catch(err => {
          console.log(err);
        })
      },
      zhisjd(data) {
        this.proproSheet.redner = data.redner;
        this.proproSheet.pducess_id = data.pducess_id;
        this.proproSheet.pName = data.pName;
        this.proproSheet.proSige_id = data.proSige_id;
        this.proproSheet.designer = data.designer;
        this.proproSheet.gongShiPrice = data.gongShiPrice;
        this.proproSheet.thereviewer = data.thereviewer;
        this.proproSheet.audittime = data.audittime;
        this.proproSheet.designreq = data.designreq;
        this.proproSheet.wuliaoSumPrice = data.wuliaoSumPrice;
        var datas = new URLSearchParams();
        this.$http.post('production/product/cxProducess?pducess_id=' + data.pducess_id).then(res => {
          if (res.length != 0) {
            this.tableData2 = res.data;
            this.drawer = true;
          }
        }).catch(err => {
          console.log(err);
        })
      }
    },
    mounted() {
      this.GetOnline(this.pageNum, this.pageSize);
    }
  }
</script>

<style scoped="scoped">
  .el-input--mini .el-input__inner {
    height: 20px;
    line-height: 28px;
  }

  * {
    padding: 0px;
    margin: 0px;
  }

  .boder_one {
    border-top: none;
    border-left: none;
    border-right: none;
    width: 105px;
  }

  th {
    background-color: blue;
  }

  .el-table tr {
    background-color: royalblue;
  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }

  .el-breadcrumb__inner {
    color: black;

  }

  .el-input__inner {

    height: 25px;

  }

  .el-input__prefix,
  .el-input__suffix {
    position: absolute;
    top: 7px;
    -webkit-transition: all .3s;
    height: 100%;
    color: #C0C4CC;
    text-align: center;
  }

  .el-table td {
    padding: 10px 0;
  }

  #father {
    height: 480px;
    overflow: hidden;
    background: white;
    border: 1px solid white;
    border-radius: 12px;

  }

  .body_main {
    margin: 0px auto;
    width: 980px;
    height: 445px;
    background-color: white;
    margin-top: 15px;
    border-top: 1px solid #333333;
    border-left: 1px solid #333333;
    border-right: 3px solid #333333;
    border-bottom: 3px solid #333333;
  }

  .span_01 {
    font-size: 14px;
  }

  #sons {
    width: 100%;
    padding: 0px;
    background-color: white;
    margin-top: 15px;
  }

  #son {

    padding: 15px;
    width: 100%;
    background-color: white;

  }

  .input_01 {
    border-top: none;
    border-right: none;
    border-left: none;
  }
</style>
